<template>
  <div class="serve">
    <div class="search">
      <div class="inp1">
        <el-row :gutter="20">
          <span
            class="ml-3 w-35 text-gray-600 inline-flex items-center"
            style="
              margin-right: 20px;
              line-height: 30px;
              text-align: center;
              margin-left: 10px;
            "
            >服务时间</span
          >
          <el-input
            v-model="input1"
            class="w-50 m-2"
            placeholder="请选择时间"
            :suffix-icon="Calendar"
          />
        </el-row>
      </div>
      <div class="inp2">
        <el-row>
          <span
            class="ml-3 w-35 text-gray-600 inline-flex items-center"
            style="margin-right: 20px; line-height: 30px; text-align: center"
            >服务机构</span
          >
          <el-input
            v-model="input2"
            class="w-50 m-2"
            placeholder="请选择服务机构"
          />
        </el-row>
        <el-row>
          <span
            class="ml-3 w-35 text-gray-600 inline-flex items-center"
            style="margin-right: 20px; line-height: 30px; text-align: center"
            >医生团队</span
          >
          <el-input
            v-model="input3"
            class="w-50 m-2"
            placeholder="请选择医生团队"
          />
        </el-row>
        <el-row>
          <span
            class="ml-3 w-35 text-gray-600 inline-flex items-center"
            style="margin-right: 20px; line-height: 30px; text-align: center"
            >签约医生</span
          >
          <el-input
            v-model="input4"
            class="w-50 m-2"
            placeholder="请选择医生"
          />
        </el-row>
      </div>
    </div>
    <div class="echarts"><demo1></demo1></div>
    <div class="stable">
      <!-- 导出图表 -->
      <div class="out">
        <el-button>导出</el-button>
      </div>
      <!-- table图表 -->
      <div class="mtable">
        <el-table
          :data="tableData"
          stripe
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
          style="text-align: center"
          show-summary
        >
          <el-table-column class="my" align="center" prop="date" label="日期" />
          <el-table-column prop="targetnum" align="center" label="目标签约量" />
          <el-table-column prop="realnum" align="center" label="实际签约量" />
          <el-table-column prop="sernum" align="center" label="目标签约量" />
          <el-table-column prop="complete" align="center" label="签约完成率" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Calendar, Search } from "@element-plus/icons-vue";
import demo1 from "@/components/serverecharts/demo2.vue";
const input1 = ref("");
const input2 = ref("");
const input3 = ref("");
const input4 = ref("");
const tableData = [
  {
    date: "2016-05-03",
    targetnum: "100",
    realnum: "90",
    complete: "92",
    sernum: "100",
  },
  {
    date: "2016-05-03",
    targetnum: "100",
    realnum: "90",
    complete: "92",
    sernum: "100",
  },
  {
    date: "2016-05-03",
    targetnum: "100",
    realnum: "90",
    complete: "92",
    sernum: "100",
  },
  {
    date: "2016-05-03",
    targetnum: "100",
    realnum: "90",
    complete: "92",
    sernum: "100",
  },
  {
    date: "2016-05-03",
    targetnum: "100",
    realnum: "90",
    complete: "92",
    sernum: "100",
  },
];
</script>

<style lang="sass" scoped>
.serve
  height: 100%
  .search
    margin-top: 20px
    margin-left: 50px
    .inp1
      .el-input
        width: 300px
    .inp2
      margin-top: 20px
      display: flex
      .el-input
        width: 300px
      .el-row
        margin-right: 100px
        display: inline-block
  .echarts
    margin-top: 50px
    height: 100%
  .stable
    .out
      text-align: right
    .mtable
      text-align: center,
      width: 100%
.el-table__footer-wrapper tbody td
  color: red
</style>
